<template>
  <div>
    <el-dialog title="商家订单明细" v-dialogDrag :visible.sync="showDetails" width="85%">
      <el-row type="flex" align="middle" justify="end" style="margin-bottom: 10px;">
        <pt-date-picker style="width: 500px;" v-model="params.date" :shortcuts="[{ text: '今天', start: 0, end: 0}, { text: '近七天', start: -7, end: 0}, {text: '近一个月', start: -30, end: 0}]" />
        <el-button size="small" style="margin:0 10px;" @click="exportExcelDetail()" v-loading="ExcelLoading">
          导出表格<i class="el-icon-download"></i>
        </el-button>
        <el-button type="primary" size="small" icon="el-icon-search" @click="$refs.pagination.handleSizeChange(10)">查询</el-button>
      </el-row>
      <el-table :data="tableDetails.list">
        <el-table-column prop="createTime" label="订单日期" min-width="150" align="left" />
        <el-table-column prop="orderCode" label="订单号" min-width="140" align="left" />
        <el-table-column prop="businessName" label="商家名称" min-width="180" align="left" />
        <el-table-column label="支付信息" min-width="100px" align="left">
          <template slot-scope="scope">
            <div>{{scope.row.totalpay}}</div>
            <div>{{paySatus(scope.row.payType)}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="transactionAmount" min-width="120" align="right">
          <template slot="header" slot-scope="scope">
            <el-tooltip effect="dark" content="用户实际支付的金额" placement="top">
              <el-button icon="el-icon-question" type="text" />
            </el-tooltip>订单交易额
          </template>
        </el-table-column>
        <el-table-column prop="originalPrice" min-width="140" align="right">
          <template slot="header" slot-scope="scope">
            <el-tooltip effect="dark" content="（商品原价+包装费）＝原抽佣营业额" placement="top">
              <el-button icon="el-icon-question" type="text" />
            </el-tooltip>商品折前销售额
          </template>
        </el-table-column>
        <el-table-column prop="actualRakeTurnover" min-width="110" align="right">
          <template slot="header" slot-scope="scope">
            <el-tooltip effect="dark" content="（商品实付价格+包装费）≠实抽佣营业额（折前抽佣商家的实抽佣额和原抽佣额相同）" placement="top">
              <el-button icon="el-icon-question" type="text" />
            </el-tooltip>商品销售额
          </template>
        </el-table-column>
        <el-table-column prop="merchantDeliveryRevenue" min-width="120" align="right">
          <template slot="header" slot-scope="scope">
            <el-tooltip effect="dark" content="自配送费收益，不参与抽佣计算" placement="top">
              <el-button icon="el-icon-question" type="text" />
            </el-tooltip>商家配送盈收
          </template>
        </el-table-column>
        <el-table-column prop="merchantSubsidyAmount" min-width="120" align="right">
          <template slot="header" slot-scope="scope">
            <el-tooltip effect="dark" content="区域满减活动补贴商家承担部分+区域配送费活动补贴商家承担部分+首单立减活动补贴商家承担部分+商品特价支出+客户使用了的优惠券支出" placement="top">
              <el-button icon="el-icon-question" type="text" />
            </el-tooltip>商家活动支出
          </template>
        </el-table-column>
        <el-table-column min-width="100" align="right">
          <template slot="header" slot-scope="scope">
            <el-tooltip effect="dark" content="平台抽佣比例" placement="top">
              <el-button icon="el-icon-question" type="text" />
            </el-tooltip>抽佣比例
          </template>
          <template slot-scope="scope">{{scope.row.coefficient}}%</template>
        </el-table-column>
        <el-table-column prop="serviceFee" min-width="80" align="right">
          <template slot="header" slot-scope="scope">
            <el-tooltip effect="dark" content="即实抽佣盈收，区分折前折后" placement="top">
              <el-button icon="el-icon-question" type="text" />
            </el-tooltip>服务费
          </template>
        </el-table-column>
        <el-table-column prop="merchantRevenue" min-width="100" align="right">
          <template slot="header" slot-scope="scope">
            <el-tooltip effect="dark" content="商品折前销售额+商家自配送盈收-商家活动支出-服务费" placement="top">
              <el-button icon="el-icon-question" type="text" />
            </el-tooltip>商家收入
          </template>
        </el-table-column>
        <el-table-column prop="originalDistributionIncome" min-width="140" align="right">
          <template slot="header" slot-scope="scope">
            <el-tooltip effect="dark" content="有效订单内所有的配送费之和，不计入配送类优惠" placement="top">
              <el-button icon="el-icon-question" type="text" />
            </el-tooltip>区域原配送盈收
          </template>
        </el-table-column>
        <el-table-column prop="realDistributionSurplus" min-width="140" align="right">
          <template slot="header" slot-scope="scope">
            <el-tooltip effect="dark" content="用户支付的配送费，即有效订单内所有实际收取的配送费之和" placement="top">
              <el-button icon="el-icon-question" type="text" />
            </el-tooltip>区域实配送盈收
          </template>
        </el-table-column>
        <el-table-column prop="platformSubsidyAmount" min-width="120" align="right">
          <template slot="header" slot-scope="scope">
            <el-tooltip effect="dark" content="区域满减活动补贴代理商承担部分+区域配送费活动补贴代理商承担部分+首单立减活动补贴代理商承担部分+客户使用了的代理商红包" placement="top">
              <el-button icon="el-icon-question" type="text" />
            </el-tooltip>区域活动支出
          </template>
        </el-table-column>
        <el-table-column prop="riderTakeawayCommission" min-width="120" align="right">
          <template slot="header" slot-scope="scope">
            <el-tooltip effect="dark" content="1.配送距离小于基础配送距离，基本配送提成+特殊时段提成 2.超出基础距离，基础配送提成+超出距离部分提成+特殊时段提成  3.如果1和2计算结果大于每单最高提成，则按照每单最高提成计算" placement="top">
              <el-button icon="el-icon-question" type="text" />
            </el-tooltip>骑手外卖佣金
          </template>
        </el-table-column>
        <el-table-column prop="regionalGossPofit" min-width="120" align="right">
          <template slot="header" slot-scope="scope">
            <el-tooltip effect="dark" content="服务费+区域原配送费盈收-区域活动补贴" placement="top">
              <el-button icon="el-icon-question" type="text" />
            </el-tooltip>区域毛利润
          </template>
        </el-table-column>
        <el-table-column prop="regionalNetProfit" min-width="120" align="right">
          <template slot="header" slot-scope="scope">
            <el-tooltip effect="dark" content="服务费+区域原配送盈收-区域活动补贴-骑手外卖佣金" placement="top">
              <el-button icon="el-icon-question" type="text" />
            </el-tooltip>区域净利润
          </template>
        </el-table-column>
        <el-table-column prop="refundAmount" label="退款金额" min-width="90" align="right" />
      </el-table>
      <pt-table-loading v-show="isloadingTable"/>
      <pt-pagination ref="pagination" :total="tableDetails.total" @listeningEvent="triggerEvent" />
    </el-dialog>

    <el-table v-show="false" id="out-tables" :data="tableDetailsExlx" :summary-method="getSummaries" show-summary>
      <el-table-column prop="createTime" label="订单日期"/>
      <el-table-column prop="orderCode" label="订单号" />
      <el-table-column prop="businessName" label="商家名称" />
      <el-table-column label="支付信息">
        <template slot-scope="scope">
          <div>{{scope.row.totalpay}}</div>
          <div>{{paySatus(scope.row.payType) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="transactionAmount" label="订单交易额" />
      <el-table-column prop="originalPrice" label="商品折前销售额" />
      <el-table-column prop="actualRakeTurnover" label="商品销售额" />
      <el-table-column prop="merchantDeliveryRevenue" label="商家配送盈收" />
      <el-table-column prop="merchantSubsidyAmount" label="商家活动支出" />
      <el-table-column label="抽佣比例">
        <template slot-scope="scope">{{scope.row.coefficient}}%</template>
      </el-table-column>
      <el-table-column prop="serviceFee" label="服务费" />
      <el-table-column prop="merchantRevenue" label="商家收入" />
      <el-table-column prop="originalDistributionIncome" label="区域原配送盈收" />
      <el-table-column prop="realDistributionSurplus" label="区域实配送盈收" />
      <el-table-column prop="platformSubsidyAmount" label="区域活动支出" />
      <el-table-column prop="riderTakeawayCommission" label="骑手外卖佣金" />
      <el-table-column prop="regionalGossPofit" label="区域毛利润" />
      <el-table-column prop="regionalNetProfit" label="区域净利润" />
      <el-table-column prop="refundAmount" label="退款金额" />
    </el-table>
  </div>
</template>

<script>
import { paySatus } from '@/utils/ptkc.js'
import acction from '@/utils/acction.js'
export default {
  props: {
    date: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      paySatus: paySatus,
      showDetails:false,
      isloadingTable: false,
      params: {
        page: 0,
        size: 10,
        businessId: '',
        date: ['', '']
      },
      name: '',
      total: null,
      tableDetails: {},
      tableDetailsExlx: [],
      ExcelLoading: false,
    }
  },
  methods: {
    salesDetails(item) { // 查看商家订单
      if (item) {
        this.name = item.businessName
        this.params.businessId = item.businessId
        this.showDetails = true
        this.$nextTick(() => {
          this.params.date = this.date
        })
      }
      const params = {
        businessid: this.params.businessId,
        page: this.params.page,
        size: this.params.size,
        startDate: this.params.date[0],
        endDate: this.params.date[1]
      }
      this.isloadingTable = true
      this.$http.get('/server/order/billingDetailsList?' + this.qs.stringify(params)).then(res => {
        if (res.data.success) {
          this.tableDetails = res.data.data
          this.total = res.data.data.total
        }
      }).finally(() => { this.isloadingTable = false })
    },
    exportExcelDetail() {
      this.ExcelLoading = true
      const params = { ...this.params }
      params.startDate = params.date?params.date[0] : ''
      params.endDate = params.date?params.date[1] : ''
      params.page = 0
      params.size = this.total
      delete params.date
      this.$http.get('server/order/billingDetailsList?' + this.qs.stringify(params)).then(res => {
        if (res.data.success) {
          this.tableDetailsExlx = res.data.data.list
          setTimeout(() => {
            this.ExcelLoading = false
            this.$emit('downExlc', document.querySelector('#out-tables'), this.name)
          }, 500)
        }
      }).finally(() => { this.ExcelLoading = false })
    },
    getSummaries(param) { // 表格统计
      const {columns, data} = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return new acction(prev,curr).accAdd()
            } else {
              return prev
            }
          }, 0)
        } else {
          sums[index] = 'N/A'
        }
      })
      return sums
    },
    triggerEvent(type,val) { // 分页器
      if (type === 'page') {
        this.params.page = val - 1
      } else if (type === 'size') {
        this.params.page = 0
        this.params.size = val
      }
      this.salesDetails()
    }
  }
}
</script>